<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="wuidth=device-wuidth, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul{
        list-style: none;
    }
    #root{
        width: 600px;
        margin: auto;
    }
    .box{
        border: 1px solid;
        margin: 20px 0;
        padding: 10px;
    }
    .td{
        border-collapse: collapse;
        width: 100%;
    }
    .td td,
    .td th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }
    .td th{
        background-color: aqua;
        color: yellow;
    }
</style>
<body>
    <div id="root">
        <div class="box">
            编号:<input type="text"  v-model="uid">
            人物名称:<input type="text" v-model="uname">
            <br>
            *人物图片地址:<input type="text" v-model="imgSrc">
            来源:<input type="text" v-model="source">
            <button @click="addFn">添加</button>
        </div>
        <div class="box">
            人物名称: <input type="text"  placeholder="请输入搜索条件">
        </div>
        <div>
            <table class="td">
                <tr>
                    <th>
                        <input type="checkbox"  @change="chooseFn" :checked="status">全选全不选
                    </th>
                    <th>人物图片</th>
                    <th>编号</th>
                    <th>人物名称</th>
                    <th>来源</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                
                <tr v-for="(item,i) in tableData" :key="i">
                    <td>
                        <input type="checkbox" :value="item" v-model="choose">
                    </td>
                    <td>
                        <img :src="item.imgSrc" alt="" wuidth="60" height="50">
                    </td>
                    <td>
                        {{item.uid}}
                    </td>
                    <td>
                        {{item.uname}}
                    </td>
                    <td>
                        {{item.source}}
                    </td>
                    <td>
                        <button :disabled="item.count==1" @click=item.count-->-</button>
                        <b> {{item.count}}</b>
                        <button @click=item.count++>+</button>
                    </td>
                    <td>
                        <button @click="delFn(i)">删除</button>
                    </td>
                </tr>
            </table>
            <div class="box" v-show="!tableData.length">
                没有更多数据了
            </div>
            <div class="box" style="width:580px;text-align:right">
                <h1>总数:{{total}}</h1>
            </div>
        </div>
    
    </div>
</body>
</html>
<script src="http://unpkg.zhimg.com/vue@2"></script>
<script>
const vm = new Vue({
    el: "#root",
    data:{
        uid: "",
        uname: "",
        imgSrc: "",
        source: "",
        tableData:[
            { uid:1,uname:"惠",imgSrc: "../img/惠.jpg",source: "路人女主",count:5,},
            { uid:2,uname:"托尔",imgSrc: "../img/托尔.jpg",source: "龙女仆",count:3,},
            { uid:3,uname:"少女",imgSrc: "../img/少女.jpg", source: "原神",count:12,}
        ],
        choose:[],
        status: false,   
        },
    watch:{
        choose(newVal){
            if(newVal.length===this.tableData.length){
                this.status = true
            }
            else{
                this.status = false
            }
        }
    },
    computed:{
        total(){
           return(
             this.choose.reduce(function (total,item){
                return total += item.count
            },0)).toFixed(2)
        }
    },
    methods: {
        addFn() {
            if(!this.uid || !this.uname || !this.source){
                alert("请输入必要信息")
                return
            }
            else if(!Number(this.uid)){
                alert("请在编号中输入数字")
                return
            }
            let obj={
                id: Math.random().toString(32).substring(2),
                uid:this.uid,
                uname:this.uname,
                imgSrc:this.imgSrc,
                source:this.source,
                count: 1  
                }
            this. tableData.push(obj)
            },
        delFn(i) {
            this.tableData.splice(i, 1)
            // this.choose.splice(i,1)
        },
        chooseFn(e){
            // console.log(e.target.checked)
            let choose = e.target.checked;
            if(choose){
                this.choose = this.tableData;
            }
            else{
                this.choose = []
            }
        }
    },
})
</script>